<template>
    <div>
            <div class="selectMenu flex">
                <div class="case-type flex">
                  <p>案件类型：</p>
                    <el-select v-model="Casevalue" placeholder="请选择" @change="getSelectChildeMenu(Casevalue)">
                      <el-option v-for="item in optionMenu" :key="item.Id" :label="item.Category_Name"  :value="item.Id"> </el-option>
                    </el-select>

                    <el-select v-model="Casevalue1" placeholder="请选择" style="margin-left: 10px;" @change="changeTowValue(Casevalue1)">
                    <el-option v-for="(item,index) in optionChildMenu" :key="index" :label="item.Value"  :value="item.Id"> </el-option>
                  </el-select>
                </div>

                <div class="input flex" style="margin-left: 200px;">
                      <input placeholder="请输入关键词搜索"  v-model="SearchInput" class="case-input" @keyup.enter="searchContent"/>
                          
                      <button class="case-button" @click="searchContent()"><i class="el-icon-search"></i></button>
                    
                </div>   
                <button class="dingzhi newclear" @click="clear()">清空</button>
                <img src="../../assets/img/shuaxin.png" alt="" @click="updateData()" class="shuaxin_btn" style="cursor: pointer;">

               

            </div>

             <div class="selectMenu flex">
                <div class="case-time flex">
                    <p>起止时间：</p>
                    <el-date-picker
                    @change="changeTime"
                    v-model="dateValue"
                    type="daterange"
                    :picker-options="pickerOptions2"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    align="right"
                    class="newtime">
                    </el-date-picker>
                </div>

                
              <button  style="cursor:pointer" class="fenfa" @click.stop="wholewindows()" >全部分发</button>
                
            </div>


            <div class="flex case-child" ></div>
            <div class="showTab">
            <ul class="showTab-ul">
              <li class="showTab-li" v-show="cur==0">
                 <el-table :data="closeCasekArr" border style="width: 100%" :header-cell-style="cellStyle" @selection-change="handleSelectionChange" ref="multipleTable" :row-key="getRowKeys">

                      <el-table-column type="selection" width="40" :reserve-selection="true"></el-table-column>

                      <el-table-column prop="Case_No" label="案件编号" width="110" :show-overflow-tooltip="true" ></el-table-column>
                      <el-table-column prop="Case_Name" label="案件名称" width="" :show-overflow-tooltip="true"></el-table-column>
                      <el-table-column prop="Value" label="案件类别" width="" :show-overflow-tooltip="true"> </el-table-column>
                         
                      <el-table-column prop="staff_Name" label="主办律师" width="" :show-overflow-tooltip="true"> </el-table-column>
                      
                      <el-table-column  label="创建时间" width="110"  prop="Date_Created" > 
                           
                      </el-table-column>
                        <el-table-column  label="操作"> 
                          <template  slot-scope="scope">
                             <button  style="cursor:pointer" class="btn-caozuo" @click.stop="newFenfa(scope.row.Id)" >分发</button>
                          

                          </template>
                        </el-table-column>
                  </el-table>
                 <div class="block flex">
                  <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
                 :page-sizes="[20,50,100]" :page-size="pageNum"  layout="total, sizes, prev, pager, next, jumper" :total="total">
                   </el-pagination>
                </div>
                </li>
                </ul>
            </div>
             <el-dialog  :visible.sync="dialogFormVisibleWord1" :modal-append-to-body='false' :modal='false' width="1000px">
                        <caseWord :dataWord='dataWord'></caseWord>
                </el-dialog>


            <!--  单个分发窗口  -->
            <el-dialog  :visible.sync="dialogFormVisible" :modal-append-to-body='false' :modal='false' :before-close="Closewindows" top="300px" width="600px" >
                <div slot="title" class="dialog-title">
                  <p>指派风控分组成员</p>
                </div>

                        <el-form class="form-select">
                          <el-form-item label="风控分组成员" :label-width="formLabelWidth">
                            <el-select v-model="managementType" placeholder="请选择分组" class="el-select1">
                                    <el-option v-for="vo in fkMember" :key="vo.Id" :label="vo.Staff_Name"  :value="vo.User_Id"></el-option> 
                            </el-select>
                        </el-form-item>
                            
                      </el-form>
                <div slot="footer" class="dialog-footer">
                <div class="flex dialogFormVisivleFooter">
                    <el-button type="primary" @click="upd_Member()" :disabled="isDisabled4">保存</el-button>
                </div>
                </div>
            </el-dialog>
             <!--  单个分发窗口  -->


             <!--  多个分发窗口  -->
            <el-dialog  :visible.sync="dialogFormVisible2" :modal-append-to-body='false' :modal='false' top="300px" width="600px">
                <div slot="title" class="dialog-title">
                  <p>指派风控分组成员</p>
                </div>

                        <el-form class="form-select">
                          <el-form-item label="风控分组成员" :label-width="formLabelWidth">
                            <el-select v-model="managementType" placeholder="请选择分组" class="el-select1">
                                    <el-option v-for="vo in fkMember" :key="vo.Id" :label="vo.Staff_Name"  :value="vo.User_Id"></el-option> 
                            </el-select>
                        </el-form-item>
                            
                      </el-form>
                <div slot="footer" class="dialog-footer">
                <div class="flex dialogFormVisivleFooter">
                    <el-button type="primary" @click="wholeFenfa()" :disabled="isDisabled4">保存</el-button>
                </div>
                </div>
            </el-dialog>
             <!--  多个分发窗口  -->

    </div>
</template>
<script>
import qs from 'qs';
import caseWord from '../case/caseWord'

export default {
    data(){
        return{
                cur:0,
                closeCasekArr:[],
                //当前页
                currentPage:1,
                total:0,
                pageNum:20,
                      //搜索
                SearchInput:'',
                Casevalue:'',
                Casevalue1:'',
                Casevalue2:0,
                optionMenu:[],
                codeList:[],
                deleteList:[],
                multipleSelection:"",
                optionChildMenu:[],
                dialogFormVisible:false,

                //分发窗口
                blurInput:'',
                isDisabled4:false,
                managementType:"",
                formLabelWidth:'',
                fkMember:[],
                dialogFormVisible2:false,

                value:'',
                //时间
                dateValue:'',
               
                pickerOptions2: {
                  shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                      const end = new Date();
                      const start = new Date();
                      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                      picker.$emit('pick', [start, end]);
                    }
                  }, {
                    text: '最近一个月',
                    onClick(picker) {
                      const end = new Date();
                      const start = new Date();
                      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                      picker.$emit('pick', [start, end]);
                    }
                  }, {
                    text: '最近三个月',
                    onClick(picker) {
                      const end = new Date();
                      const start = new Date();
                      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                      picker.$emit('pick', [start, end]);
                    }
                  }]
                },

                 //状态
                options:[
                {value:0,label:'制订中'},{value:1,label:'已审核'},{value:2,label:'已签合同'},{value:3,label:'已结案'}
                ],
                dialogFormVisibleWord1:false,
                 dataWord:{},
                 Category_Id:0, 
                 getRowKeys(row) {
                  return row.Case_No;
                },
        }
    },
    inject:["reload"],
    
    methods:{
          deleteRow(index, rows) {
            rows.splice(index, 1);
          },
          updateData(){
            this.getCloseCasekArr()
          },
          getCloseCasekArr:function(){
            if(this.start == undefined){
                this.start = ""
            }
            if(this.end == undefined){
                this.end = ""
            }
            this.$http.get('/yongxu/Toexamine/showDistributenoe',{params:{
              PageNumber:this.currentPage,
              Display_Page_Number:this.pageNum,
              Dic_Id:this.Casevalue2,
              VagueName:this.SearchInput,
              Category_Id:this.Category_Id,
              MinTime:this.start,
              MaxTime:this.end,
            }}).then((res)=>{
                this.closeCasekArr = res.data.mapList
                this.total = res.data.PageCount
            })
          },
       sortChange(column){
    
        if(column.order !== null && column.prop === 'Filing_Date'){
            var data = []
            for(let i = 0;i<this.closeCasekArr.length;i++){
             
                if(this.closeCasekArr[i].Filing_Date === null || this.closeCasekArr[i].Filing_Date === undefined){
                    data.push(this.closeCasekArr[i])
                }else{
                  data.unshift(this.closeCasekArr[i])
                }
            }
            this.closeCasekArr = data
       
        }
        if(column.order === null){
          this.closeCasekArr = this.closeCasekArr
        }
        this.sortRule.order = column.order
        this.sortRule.prop = column.prop
      },
         //获取二级菜单下拉
      changeTowValue:function(id){
         if(id == '' || id ==null){
          this.Casevalue2 = 0
      }else{
        this.Casevalue2 = id
      }
      
      this.getCloseCasekArr()
      },
      //状态查询
      changeStatus:function(id){
        //console.log(id)
         this.statusValue = id
         this.getCloseCasekArr()
      },
      //时间查询
      changeTime:function(value){
          if(value==null){
            this.start = '',
            this.end = '',
            this.getCloseCasekArr()
            return 
          }
          let value1= value[0]
          let value2= value[1]
          var start = new Date(value1);  
          var youWant1=start.getFullYear() + '-' + (start.getMonth() + 1) + '-' + start.getDate() + ' ' + start.getHours() + ':' + start.getMinutes() + ':' + start.getSeconds(); 
          var end = new Date(value2);  
          var youWant2=end.getFullYear() + '-' + (end.getMonth() + 1) + '-' + end.getDate() + ' ' + end.getHours() + ':' + end.getMinutes() + ':' + end.getSeconds(); 
          this.start = youWant1
          this.end = youWant2
          this.getCloseCasekArr()
      },
      //搜索查询
      searchContent:function(){
       //console.log(this.SearchInput)
       this.getCloseCasekArr()
      },
      //获取一级下拉
        getSelectMenu:function(){
         this.$http.get('/yongxu/Index/GetBoxOne').then((res)=>{
           this.optionMenu = res.data
        })
      },
      //不知道什么方法
      cellStyle() {
        return 'border-right: 1px solid #ebeef5'
      },
      //下拉二级下拉查询
       getSelectChildeMenu:function(id){ 
         this.optionChildMenu = ''
         this.Casevalue1 =''
         //console.log(id)
         this.selectOneId = id
         this.$http.get('/yongxu/Index/GetBoxTwo',{params:{Id:this.selectOneId}}).then((res)=>{
          //console.log(res)
          this.optionChildMenu = res.data  
           this.optionChildMenu.push({Id:0,Value:'全部',Category_Id:0})
          this.Category_Id = this.Casevalue 
          if(res.data.length===0){
                        this.Casevalue1 = ''
                }else{
                    this.Casevalue1 =0  
                    }
          this.changeTowValue(this.Casevalue1)
        })
      },
        clear:function(){
          this.currentPage = 1
        this.SearchInput = ''
        this.Casevalue2 = 0
        this.value = ''
        this.Casevalue = ''
        this.Casevalue1 = ''
        this.Category_Id=0
        this.end=''
        this.start=''
        this.dateValue=''
        this.getCloseCasekArr()
        
      },
      handleSizeChange:function(val) {
        //console.log(`每页 ${val} 条`);
        this.pageNum = val
         this.getCloseCasekArr()

      },
      handleCurrentChange:function(val) {
          this.currentPage = val
          this.getCloseCasekArr()
          //console.log(`当前页: ${val}`);
      },
      handleSelectionChange(val) {
          this.codeList=[]
          this.deleteList = []
          this.multipleSelection = val;
          console.log(this.multipleSelection)
          for(var i =0;i<this.multipleSelection.length;i++){
            this.codeList[i] = this.multipleSelection[i].Case_No
            this.deleteList[i] = this.multipleSelection[i].Id
          }
          console.log(this.deleteList)
      },//多选操作
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },

      newFenfa(id){
        this.$http.post('/yongxu/Toexamine/getRiskmembernoe').then((res)=>{
            this.dialogFormVisible = true
            this.fkMember = res.data
            this.deleteList = id
        }).catch((err)=>{
            this.$message({
                message:'服务器异常',
                type:'warning'
            });     
            return false
         })
      },//分发窗口
      upd_Member(){
          let addJson = [
            {
              'Files_Id':this.deleteList,
              'User_Id':this.managementType,
              'Distribute_Type':2,
            }
          ]
          this.$http.post('/yongxu/Toexamine/distributionOperation',qs.stringify({
              str:JSON.stringify(addJson)
          })).then((res)=>{
              if(res.data.sign = 200){
                this.$message({
                    message:'添加成功',
                    type:'success'
                });
                this.dialogFormVisible = false
                this.deleteList = []
                this.managementType = ''
                this.getCloseCasekArr()
              }
          }).catch((err)=>{
            this.$message({
                message:'服务器异常',
                type:'warning'
            });     
            return false
         })
      },//单个分发上传
      Closewindows(){
          this.deleteList = []
          this.dialogFormVisible = false
      },
      wholewindows(){
          if(this.deleteList == undefined || this.deleteList == ""){
              this.$message({
                  message:'请选择案件',
                  type:'warning'
              });     
          }else{
              this.$http.post('/yongxu/Toexamine/getRiskmembernoe').then((res)=>{
                this.dialogFormVisible2 = true
                this.fkMember = res.data
              })
          }
          
      },
      wholeFenfa(){
          // console.log(this.deleteList)
          let addJson = []
          this.deleteList.forEach(element => {
              let Files_Id = element
              let User_Id = this.managementType
              let Distribute_Type = 2
              addJson.push({'Files_Id':Files_Id,'User_Id':User_Id,'Distribute_Type':Distribute_Type})
          });
          this.$http.post('/yongxu/Toexamine/distributionOperation',qs.stringify({
              str:JSON.stringify(addJson)
          })).then((res)=>{
              if(res.data.sign = 200){
                this.$message({
                    message:'添加成功',
                    type:'success'
                });
                this.dialogFormVisible2 = false
                this.deleteList = []
                this.managementType = ''
                this.getCloseCasekArr()
              }
          }).catch((err)=>{
            this.$message({
                message:'服务器异常',
                type:'warning'
            });     
            return false
         })
      },
      //全部分发方法
      },


    mounted:function(){
        this.getCloseCasekArr()
        this.getSelectMenu()
    },
     filters:{
          getTime:function(time){
        if(time==''||time==null){
            return time
        }else{
          return time.substring(0,10)
        }
          },
    },
    //     watch:{
    // Casevalue:function(newV,oldV){
    //      this.getSelectChildeMenu(newV)
    // }
    //  },
      components:{
        'caseWord':caseWord,
    },
}
</script>
<style>
@import '../../assets/sass/main.css';
.input{
    flex-direction: row;
    justify-content: flex-start;
    width: 250px;
    margin-right: 20px;
    border-radius: 45px;
    border: 1px solid #DDDDDD;
    
}
.case-input{
      width:  200px;
    height: 36px;
    /* border: 1px solid #DDDDDD; */
    border-top-left-radius: 45px;
    border-bottom-left-radius: 45px;
   
    padding-left: 21px;
    font-size: 14px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    color: #4a4a4a;
    background-color: transparent;
}
.case-button{
    outline: none;
    width: 48px;
    height: 28px;
    border: none;
    border-radius: 36px 36px 36px 36px;
    background-color: #fefeff;
    margin-right: 4px;
    margin-top: 4px;
    cursor: pointer;
}
 .input:hover{
    border: 1px solid #7E2C2E;
}
.case-button:hover{
    background: #7E2C2E;
    color: #ffffff;
}
.case-child-end{
    flex-direction: row;
    justify-content: flex-end;
}
.selectMenu{
    margin-top: 20px;
}
.newtime{
    width: 300px!important;
}
.fenfa{
    border: #7E2C2E;
    background: #7E2C2E;
    color: #fff;
    font-size: 14px;
    outline: none;
    height: 30px;
    margin-left: 2px;
    width: 80px;
}
.form-select .el-select1{
  width: 400px;
}
</style>


